<template>
  <div class="table">
    <el-table
      ref="table"
      v-loading="loading"
      class="custom-table"
      :data="data"
      :border="options.border"
      :height="options.height"
      :show-header="options.header"
      :stripe="options.stripe"
      tooltip-effect="dark"
      :cell-class-name="cellClassName"
      @select="handleSelect"
      @select-all="handleSelectionAll"
      @selection-change="handleSelectionChange"
    >
      <!-- 序号 -->
      <el-table-column v-if="options.index" type="index" label="序号" width="55" align="center" />
      <!--selection选择框-->
      <el-table-column
        v-if="options.select"
        type="selection"
        :selectable="selectable"
        width="55"
        align="center"
      />

      <template v-for="(column, index) in columns">
        <!--数据列-->
        <el-table-column
          v-if="!column.status"
          :key="index"
          :fixed="column.fixed"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :show-overflow-tooltip="column.tooltip"
          :align="column.align || 'center'"
        >
          <!-- 自定义表头 -->
          <template v-if="column.type === 'custom'">
            <template slot="header">
              <!-- <div class="custom-header-content" v-html="options.customColumnHtml(column.info)" /> -->
              <div class="custom-header-content">
                <RenderHeader v-if="column.renderHeader" :renderHeader="column.renderHeader" />
              </div>
            </template>
          </template>

          <template slot-scope="{ row, $index }">
            <!-- slot -->
            <template v-if="column.slot">
              <slot :name="column.slot" :row="row" :column="column" :$index="$index" />
            </template>

            <!-- 含有click -->
            <template v-if="column.onClick">
              <span @click.stop="column.onClick(row, $index, scope)">{{ row[column.prop] }}</span>
            </template>

            <!-- 含有图片 -->
            <template v-else-if="column.type === 'image'">
              <img
                :style="columns.style ? columns.style : 'width: 80px; height: 80px'"
                :src="row[column.prop]"
              />
            </template>

            <!-- 含有render函数 -->
            <template v-else-if="column.render">
              <RenderDom :row="row" :index="index" :render="column.render" />
            </template>

            <!-- 其他 -->
            <template v-else>
              <span>{{ row[column.prop] }}</span>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
/**
 * PageTable
 * @param {Object} options 配置项
 * @param {Array} columns 表格列
 * @param {Array} data 表格数据
 */

// const options = {
//   border: true,  是否带有纵向边框
//   height: 750,  Table 的高度，默认为自动高度。
//   index: true,  是否显示序号列
//   select: false  是否显示选择框
//   header: true  是否显示标题
// }

// const column = {
//  type: ‘custom’ 开启自定义表头
//  type: 'slot' 插槽
//  type: 'image' 显示图片
//  type: 'render' render函数
//  type: 'button' 显示按钮
// }

export default {
  name: 'PageTable',
  components: {
    RenderDom: {
      functional: true,
      props: {
        row: Object,
        render: Function,
        index: Number,
        column: {
          type: Object,
          default: null
        }
      },
      render: (h, data) => {
        const params = {
          row: data.props.row,
          index: data.props.index
        }
        if (data.props.column) params.column = data.props.column
        return data.props.render(h, params)
      }
    },
    RenderHeader: {
      functional: true,
      props: {
        renderHeader: Function,
        column: {
          type: Object,
          default: null
        }
      },
      render: (h, data) => {
        return data.props.renderHeader(h, data.props.column)
      }
    }
  },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    options: {
      type: Object,
      default: () => ({
        border: true,
        header: true
      })
    },
    columns: {
      type: Array,
      default: () => {
        return []
      }
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    // 监听多选框改变
    handleSelectionChange(val) {
      this.$emit('selectChange', val)
    },
    // 单选
    handleSelect(val, row) {
      this.$emit('select', { val, row })
    },
    // 多选
    handleSelectionAll(val) {
      this.$emit('selectAll', val)
    },
    // 行样式
    rowStyle({ row, rowIndex }) {
      console.log(row, rowIndex)
    },
    // 默认选择 - type='select'
    setDefalutSelect(rows) {
      rows.forEach(row => {
        console.log(row)
        const index = this.data.findIndex(item => item.id === row.id)
        this.$refs.table.toggleRowSelection(this.data[index])
      })
    },
    // 仅对 type=selection的列有效  CheckBox 是否可以勾选
    selectable(row, index) {
      return this.options.selectable ? this.options.selectable(row, index) : true
    },
    cellClassName({ row, column, rowIndex, columnIndex }) {
      return this.options.cellClassName
        ? this.options.cellClassName({ row, column, rowIndex, columnIndex })
        : ''
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table {
  overflow-y: auto;
}
</style>
